<template>
  <div>
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <el-date-picker
          v-model="selectForm.start_time"
          value-format="yyyy-MM-dd"
          format="yyyy 年 MM 月 dd 日"
          placeholder="查询开始"
          size="medium"
          :picker-options="dataPickerBeforeTodayOptions"
          style="width: 45%;"
        ></el-date-picker>
        <span style="padding: 0 10px;">~</span>
        <el-date-picker
          v-model="selectForm.end_time"
          value-format="yyyy-MM-dd"
          format="yyyy 年 MM 月 dd 日"
          placeholder="查询结束"
          size="medium"
          :picker-options="dataPickerBeforeTodayOptions"
          style="width: 45%;"
        ></el-date-picker>
      </el-col>
      <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
        <el-button
          size="medium"
          type="primary"
          icon="el-icon-search"
          class="fr"
          @click="search"
        >
          搜索
        </el-button>
      </el-col>
    </el-row>
    <div class="accout-detail cellMain">
      <div class="item">
        <div class="item-title">姓名</div>
        <div class="item-content">{{ base.name }}</div>
      </div>
      <div class="item">
        <div class="item-title">性别</div>
        <div class="item-content">{{ base.sex | sexFilter }}</div>
      </div>
      <div class="item">
        <div class="item-title">年龄</div>
        <div class="item-content">{{ base.age }}</div>
      </div>
      <div class="item" v-for="(item, key, i) in dataObj.list" :key="i">
        <div class="item-title">{{ key }}</div>
        <div class="item-content">{{ item }}</div>
      </div>
      <!-- <div class="item">
        <div class="item-title">入住状态</div>
        <div class="item-content">{{ dataObj.status || "" }}</div>
      </div> -->
      <div class="item">
        <div class="item-title">入院时间</div>
        <div class="item-content">{{ baseAccount.live_time }}</div>
      </div>
      <div class="item">
        <div class="item-title">离院时间</div>
        <div class="item-content">{{ baseAccount.leave_time }}</div>
      </div>
      <div class="item">
        <div class="item-title">总交款</div>
        <div class="item-content">{{ dataObj.shou }}</div>
      </div>
      <div class="item">
        <div class="item-title">总消费</div>
        <div class="item-content">{{ dataObj.xiao }}</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "AccountDetail",
    components: {},
    filters: {
      sexFilter(val) {
        if (val == 1) {
          return "男";
        } else {
          return "女";
        }
      },
    },
    props: {
      data: {
        type: Object,
        default() {
          return {
            name: "",
            sex: "",
            age: ""
          };
        },
      },
      dataObj: {
        type: Object,
        default() {
          return {
            list: {},
            shou: 0,
            status: "",
            xiao: 0
          };
        },
      },
      baseAccount: {
        type: Object,
        default() {
          return {
            leave_time: "",
            live_time: ""
          };
        },
      }
    },
    data() {
      return {
        selectForm:{},
        base: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {},
        },
      }
        
    },
    mounted() {
      if (JSON.stringify(this.data) !== "{}") {
        this.base = this.data;
      }
    },
    methods: {
     search() {
       this.$emit("accoutSearch", this.selectForm)
     }
    },
  };
</script>
<style lang="scss" scoped>
  .cellMain {
    margin-bottom: 24px;
    margin-top: 24px;
    border-right: 1px solid #dddfe7;
    border-bottom: 1px solid #dddfe7;

    .item {
      display: flex;
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-top: 1px solid #dddfe7;
      border-left: 1px solid #dddfe7;

      .item-title {
        box-sizing: border-box;
        flex: 0 0 104px;
        width: 104px;
        padding-right: 12px;
        font-size: 16px;
        color: #999;
        text-align: right;
        background: #f6f7fa;
        border-right: 1px solid #dddfe7;
      }

      .item-content {
        display: flex;
        flex: 1;
        align-items: center;
        padding-right: 12px;
        padding-left: 12px;

        span {
          padding: 0 10px;
          font-size: 16px;
          color: #1791ff;
          cursor: pointer;
        }
      }
    }
  }
</style>
